<template>
  <div class="page">
    <uni-nav-bar
      fixed
      status-bar
      :border="false"
    >
      <div class="navigation-title">
        2025嗨喵五一欢乐赛
      </div>
    </uni-nav-bar>
    <div class="container">
      <image
        class="theme-image"
        src="https://ustatic.hudongmiao.com/%20miao/activity/home-carousel.png"
      />
      <div
        class="rule-button"
        @click="clickRule"
      >
        活动规则
      </div>
      <div class="activity-desc-wrapper">
        <div class="activity-desc">
          <div class="title">
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationLeft.png"
              mode="scaleToFill"
            />
            <text class="title-text">
              活动说明
            </text>
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationRight.png"
              mode="scaleToFill"
            />
          </div>
          <div class="content">
            激情五月，热烈庆祝五一国际劳动节，同时祝贺嗨喵科技登陆上海张江股权交易中心，成为专精特新专板上板企业，乘风破浪，未来可期。
          </div>
          <div class="invite-button">
            <button
              open-type="share"
              class="function-button"
            />
            <text class="text">
              邀请同行好友参赛赢积分
            </text>
            <image
              class="icon"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow.png"
              mode="scaleToFill"
            />
          </div>
        </div>
      </div>
      <div
        v-if="activity202505Store && activity202505Store.hongbaoScrollInfo.status !== '2'"
        class="lottery-wrapper"
      >
        <div class="lottery">
          <div class="title">
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationLeft.png"
              mode="scaleToFill"
            />
            <text class="title-text">
              幸运数字抽奖
            </text>
            <image
              class="help-icon"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/helpIcon.png"
              mode="scaleToFill"
              @click="clickLotteryIntro"
            />
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationRight.png"
              mode="scaleToFill"
            />
          </div>
          <div class="content">
            <text class="text">
              抽奖说明:000365是海喵科技的上板企业代码，同时也是本次活动的幸运数字。下方数字滚动至365，将开启一个幸运红包，可以点击领取!红包被领取后，将重新开始计数。
            </text>
          </div>
          <div class="notice">
            <image
              class="icon"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/noticeIcon.png"
              mode="scaleToFill"
            />
            <div class="message-container">
              <div
                v-for="(item, index) in activity202505Store.hongbaoInfo"
                :key="index"
                class="text-wrapper"
              >
                <text class="text1">
                  恭喜{{ item.emcee_name }}老师获得
                </text>
                <text class="text2">
                  {{ item.title }}
                </text>
                <text class="text1">
                  元幸运红包
                </text>
              </div>
            </div>
          </div>
          <div class="hongbao">
            <div class="time-wrapper">
              <text
                v-if="
                  activity202505Store &&
                    activity202505Store.hongbaoScrollInfo.status === '0'
                "
                class="text"
              >
                游戏开始倒计时：
              </text>
              <text
                v-if="
                  activity202505Store &&
                    activity202505Store.hongbaoScrollInfo.status === '0'
                "
                class="time"
              >
                {{ waitTime }}
              </text>
              <text
                v-else
                class="text"
              >
                游戏正在进行中...
              </text>
            </div>
            <div class="content">
              <div
                v-for="(item, index) in numberList"
                :key="index"
                class="number-wrapper"
              >
                <div class="number">
                  <div class="bar" />
                  <text class="text">
                    {{ item }}
                  </text>
                </div>
              </div>
              <image
                class="triangle"
                src="https://ustatic.hudongmiao.com/miao/activity/202505/triangleIcon.png"
                mode="scaleToFill"
              />
              <image
                class="hongbao-icon"
                src="https://ustatic.hudongmiao.com/miao/activity/202505/hongbao.png"
                mode="scaleToFill"
                @click="clickHongbao"
              />
              <div
                v-if="activity202505Store.hongbaoScrollInfo.hb_remain_size > 0"
                class="hongbao-badge"
              >
                {{ activity202505Store.hongbaoScrollInfo.hb_remain_size }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="shagban-wrapper">
        <div class="shangban">
          <div class="title">
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationLeft2.png"
              mode="scaleToFill"
            />
            <text class="title-text">
              嗨喵科技股交所上板风采
            </text>
            <image
              class="title-image"
              src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationRight2.png"
              mode="scaleToFill"
            />
          </div>
          <uni-swiper-dot
            v-if="activity202505Store.shangbanPictures.length > 0"
            class="image-list"
            :info="activity202505Store.shangbanPictures"
            :current="shangbanCurrent"
            mode="dot"
            :dots-styles="dotsStyles"
            @clickItem="clickSwiperItem"
          >
            <swiper
              class="swiper-box"
              :current="swiperDotIndex"
              autoplay
              @change="swiperChnage"
            >
              <swiper-item
                v-for="(item, index) in activity202505Store.shangbanPictures"
                :key="index"
              >
                <image
                  class="swiper-image"
                  :src="item.url"
                  mode="scaleToFill"
                />
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
        </div>
      </div>
    </div>
  </div>
  <!-- 提示登录条 -->
  <div
    v-if="!userInfo.nickname"
    class="login-remind"
  >
    <text class="text">
      暂未登录，登录后才能赢取好礼
    </text>
    <div
      class="btn"
      @click="navigateTo('login')"
    >
      立即登录
    </div>
  </div>
  <ToLoginMask v-if="!isLogin" />
  <RulesPopup
    ref="rulesPopup"
    :rule-key="ACTIVITY_RULE_KEY.ACTIVITY_202505"
    :title="indexPopupTitle"
    @popupClose="closePopup"
  />
  <Introduction
    ref="introduction"
    @popupClose="closePopup"
  />
  <LotteryIntroduction
    ref="lotteryIntroduction"
    @popupClose="closePopup"
  />
  <HongbaoOpen
    ref="hongbaoOpen"
    :success="robHongbaoSuccess"
    :money="robHongbaoMoney"
    @popupClose="closePopup"
  />
  <CustomTabBar />
</template>

<script setup lang="ts">
import { onShareAppMessage } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import { reqGetRobLuckyMoney,
  reqRecordInvite } from '@/api/activity-202310-api';
import HongbaoOpen from '@/components/activity-202505/hongbaoOpen.vue';
import Introduction from '@/components/activity-202505/Introduction.vue';
import LotteryIntroduction from '@/components/activity-202505/lotteryIntroduction.vue';
import RulesPopup from '@/components/activity-202505/RulesPopup.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import ToLoginMask from '@/components/ToLoginMask.vue';
import { ACTIVITY_RULE_KEY } from '@/static/constant/view-constant';
import { useActivity202505 } from '@/stores/activity-202505-store';
import { useUser } from '@/stores/user';
import { getLocalToken } from '@/utils/local-data';
import { navigateTo } from '@/utils/navigate';

const activity202505Store = useActivity202505();
const { personInfo202310 } = storeToRefs(activity202505Store);
const { setPersonInfo202310 } = activity202505Store;
const user = useUser();
const { userInfo, isLogin } = storeToRefs(user);
const { checkToken } = user;

/** 活动规则弹窗 */
const rulesPopup = ref<InstanceType<typeof RulesPopup>>();
/** 活动弹窗标题 */
const indexPopupTitle = ref('嗨喵巅峰赛活动规则');
/** 活动简介弹窗 */
const introduction = ref<InstanceType<typeof Introduction>>();
const lotteryIntroduction = ref<InstanceType<typeof LotteryIntroduction>>();
const hongbaoOpen = ref<InstanceType<typeof HongbaoOpen>>();
// #region 信息的获取相关

/** 检查并获取信息 */
const checkAndGetInfo = async () => {
  if (!personInfo202310.value.userId) {
    setPersonInfo202310();
  }
};

onShow(async () => {
  checkAndGetInfo();
  await updateHongbaoActivityInfo();
  await activity202505Store.setHongbaoZhongjiangInfo();
});

const inviteFriend = () => ({
  title: `@${personInfo202310.value.nickname}邀请你参加嗨喵五一欢乐赛，赢iPhone16、大疆无人机等豪礼>>`,
  path: `/pages/index?inviteKey=${personInfo202310.value.inviteKey}`,
  imageUrl:
    'https://ustatic.hudongmiao.com/%20miao/activity/share-poster.png',
});

onShareAppMessage(inviteFriend);

// #endregion

// #region 2025年五一活动相关

/** 2023年十月活动邀请好友逻辑
 * @param options 小程序onShow参数
 */
const activity202310InviteFriend = (options: AnyObject) => {
  const { inviteKey } = options;
  if (!getLocalToken()) {
    uni.setStorageSync('inviteKey', inviteKey);
  }
  reqRecordInvite(inviteKey);
};

onLoad(async (options: AnyObject | undefined) => {
  console.log('index onLoad', options);
  if (!options) return;
  checkToken();
  activity202310InviteFriend(options);
  clearNoticeIntervalId.value = startNoticeUpdate();
});

onShow(() => {
  if (isLogin.value) {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline'],
    });
  }
  // 延时0.3s后再弹出弹窗 等待页面渲染完成后弹出
  setTimeout(() => {
    judgeThenPopup();
  }, 300);
});

// #endregion

// #region  弹窗相关
// 弹窗类型
// 定义弹窗的类型、决定弹出的顺序优先级
const POPUP_TYPES = {
  // introduction: "introduction", // 第一次进小程序弹出
  pointBroadPopup: 'pointBroadPopup', // 每天弹出一次
  teamBroadPopup: 'teamBroadPopup', // 每天弹出一次
};

// 用于记录规则弹窗的显示状态
let rulePopupVisibleWhenActive = false;
/**
 * 介绍弹窗中的「活动规则」按钮点击回调
 */
const clickRule = () => {
  // 这行代码一定要放在introduction.value?.close()之前
  // 目的：用户主动查看规则弹窗，则其他自动弹出的弹窗逻辑不再执行
  rulePopupVisibleWhenActive = true;
  introduction.value?.close();
  rulesPopup.value?.open();
};
const clickLotteryIntro = () => {
  introduction.value?.close();
  lotteryIntroduction.value?.open();
};

const clickHongbao = async () => {
  if (activity202505Store.hongbaoScrollInfo.status != '1') {
    uni.showToast({
      title: '红包尚未开启!',
      icon: 'none',
    });
    return;
  }
  const untilRobSeconds = getSecondsUntil(
    activity202505Store.hongbaoScrollInfo.hb_can_rob_time,
  );
  if (untilRobSeconds > 0) {
    uni.showToast({
      title: '请等待数字滚动至365',
      icon: 'none',
    });
    return;
  }
  uni.showLoading({
    title: '抢红包中...',
    mask: true,
  });
  try {
    const { data: { data: res } } = await reqGetRobLuckyMoney(activity202505Store.hongbaoScrollInfo.hbId);
    robHongbaoSuccess.value = res.status == '1';
    if (robHongbaoSuccess.value) {
      robHongbaoMoney.value = res.rob_money;
    } else {
      robHongbaoMoney.value = '0.0';
    }
    // 抢红包失败中的已抢过情况
    if (res.errCode === '101') {
      // 提示 res.errMsg
      uni.showToast({
        title: res.errMsg,
        icon: 'none',
      });
    } else {
      hongbaoOpen.value?.open();
    }

    console.log('抢红包了', res);
    await updateHongbaoActivityInfo();
  } catch (error) {
    console.error('抢红包失败', error);
    uni.showToast({
      title: '抢红包失败，请稍后再试',
      icon: 'none',
    });
  } finally {
    uni.hideLoading();
  }
};

/**
 * 弹窗关闭的回调函数
 * 当前弹窗关闭后，判断是否需要弹出下一个弹窗
 */
const closePopup = () => {
  // 如果规则弹窗是显示状态，则需要重置
  // 并且不需要执行judgeThenPopup()逻辑
  if (rulePopupVisibleWhenActive) {
    // 进入此if说明用户主动点击打开规则弹窗的情况下关闭了规则弹窗
    rulePopupVisibleWhenActive = false;
    return;
  }
  judgeThenPopup();
};

/**
 * 显示弹窗的main方法
 */
const judgeThenPopup = () => {
  // 没有登录的情况下则只弹规则弹窗
  if (!isLogin.value) {
    judgeThenPopupRule();
    return;
  }
  // 已登录的情况下
  // 并且规则弹窗没弹过则先弹出规则弹窗
  const rulePopupResult = judgeThenPopupRule();
  if (!rulePopupResult) {
    // 进入此if说明规则弹窗已经弹出过了，可以弹出其他弹窗
    popupOther();
  }
};

/**
 * 弹出「活动规则」弹窗
 * @returns {boolean} 是否弹出规则弹窗
 */
const judgeThenPopupRule = () => {
  const storageIntroductionShowFlag = uni.getStorageSync(
    'introductionShowFlag',
  );
  if (storageIntroductionShowFlag != '1') {
    introduction.value?.open();
    uni.setStorageSync('introductionShowFlag', '1');
    return true;
  }
  return false;
};

/**
 * 弹出其他弹窗
 */
const popupOther = () => {
  const needPopupType = getNeedPopupType();
  if (!needPopupType) {
    return;
  }
  savePopupInfo(needPopupType);
};

const savePopupInfo = (popupType: string) => {
  const storagePopupInfo = uni.getStorageSync('lastShowIntroductionTime');
  let targetObj = null;
  try {
    const tmpStorageObj = JSON.parse(storagePopupInfo);
    const today = dayjs().format('YYYY-MM-DD');
    if (tmpStorageObj.date !== today) {
      // 进入此if说明缓存中的日期不是今天，需要初始化缓存
      // 通过抛出异常的方式初始化缓存
      throw new Error('init');
    } else {
      // 进入此else说明缓存中的日期是对的，将popupType添加到hasPopupTypes中
      targetObj = tmpStorageObj;
      if (!targetObj.hasPopupTypes.includes(popupType)) {
        targetObj.hasPopupTypes.push(popupType);
      }
    }
  } catch {
    // 进入此catch说明缓存中没有数据或者数据格式有问题、不符合要求，需要初始化缓存
    targetObj = {
      date: dayjs().format('YYYY-MM-DD'),
      hasPopupTypes: [popupType],
    };
  }
  uni.setStorageSync('lastShowIntroductionTime', JSON.stringify(targetObj));
};
const getNeedPopupType = () => {
  const storagePopupInfo = uni.getStorageSync('lastShowIntroductionTime');
  try {
    const tmpStorageObj = JSON.parse(storagePopupInfo);
    if (tmpStorageObj.date !== dayjs().format('YYYY-MM-DD')) {
      // 进入此if说明缓存中的数据不是今天的
      // 走异常分支的逻辑
      throw new Error('showFirstPopup');
    } else {
      // 进入此if说明缓存中的数据是今天的
      // 需要过滤出今天还没有弹出的弹窗类型
      const { hasPopupTypes } = tmpStorageObj;
      const needPopupTypes = Object.values(POPUP_TYPES).filter(
        (popupType) => !hasPopupTypes.includes(popupType),
      );
      if (needPopupTypes.length === 0) {
        // 进入此if说明今天弹窗都已经弹出过了，不需要再弹出
        return null;
      }
      // 进入此else说明今天还有弹窗没有弹出，返回第一个需要弹出的弹窗类型
      return needPopupTypes[0];
    }
  } catch {
    // 进入catch有以下几种可能：1、缓存中没数据 2、缓存中的数据格式不对 3、缓存中的数据不是今天的
    return POPUP_TYPES.pointBroadPopup;
  }
};

// #endregion

// 202505上板展示相关数据

const shangbanCurrent = ref(0);
const dotsStyles = reactive({
  backgroundColor: '#FFEFC9',
  selectedBackgroundColor: '#FF9F1D',
  width: 10,
  height: 10,
  bottom: 0,
  border: 'none',
  selectedBorder: 'none',
});
const swiperChnage = (e: any) => {
  shangbanCurrent.value = e.detail.current;
};
const swiperDotIndex = ref(0);

const clickSwiperItem = (e: any) => {
  swiperDotIndex.value = e;
};

// 202505红包滚动活动相关逻辑
const startCountdownTime = ref(0);
let robHongbaoSuccess = ref(false);
let robHongbaoMoney = ref('0.0');
const clearDownInterval = ref<(() => void) | null>(null);
const clearUpIntervalId = ref<(() => void) | null>(null);
let clearNoticeIntervalId = ref<(() => void) | null>(null);

const waitTime = computed(() => formatSecondsToTime(startCountdownTime.value));

const updateHongbaoActivityInfo = async () => {
  await activity202505Store.setHongbaoScrollInfo();
  // console.log("update---------------------",activity202505Store.hongbaoScrollInfo)

  if (clearDownInterval.value) {
    clearDownInterval.value();
  }

  if (clearUpIntervalId.value) {
    clearUpIntervalId.value();
  }

  if (activity202505Store.hongbaoScrollInfo.status === '1') {
    clearUpIntervalId.value = startCountup(updateHongbaoCallback2);
  } else {
    startCountdownTime.value = getSecondsUntil(
      activity202505Store.hongbaoScrollInfo.activity_start_time,
    );
    activity202505Store.hongbaoScrollInfo.need_wait_second = 0;
    activity202505Store.hongbaoScrollInfo.countNumber = 0;
    if (startCountdownTime.value <= 0) {
      return;
    }
    clearDownInterval.value = startCountdown(updateHongbaoCallback);
  }
};

function updateHongbaoCallback(seconds: number) {
  if (seconds % 30 == 0) {
    updateHongbaoActivityInfo();
    activity202505Store.setHongbaoZhongjiangInfo();
  }
}
function updateHongbaoCallback2(countNumber: number) {
  if (countNumber % 20 == 0) {
    updateHongbaoActivityInfo();
  }
}

function formatSecondsToTime(seconds: number) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;

  const formattedHours = String(hours).padStart(2, '0');
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(secs).padStart(2, '0');

  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

// 时间倒计时
function startCountdown(onUpdate: ((seconds: number) => void) | null) {
  const intervalId = setInterval(async () => {
    startCountdownTime.value--;

    if (onUpdate) {
      onUpdate(startCountdownTime.value);
    }
    if (startCountdownTime.value <= 0) {
      await updateHongbaoActivityInfo();
      clearInterval(intervalId);
    }
  }, 1000);

  return () => clearInterval(intervalId);
}

// 数字增长
function startCountup(onUpdate: ((countNumber: number) => void) | null) {
  const intervalId = setInterval(async () => {
    activity202505Store.hongbaoScrollInfo.countNumber++;

    if (onUpdate) {
      onUpdate(activity202505Store.hongbaoScrollInfo.countNumber);
    }
    if (activity202505Store.hongbaoScrollInfo.countNumber >= 365) {
      activity202505Store.hongbaoScrollInfo.countNumber = 365;
      clearInterval(intervalId);
    }
  }, activity202505Store.hongbaoScrollInfo.time_for_one_num * 1000);

  return () => clearInterval(intervalId);
}

function startNoticeUpdate() {
  const intervalId = setInterval(async () => {
    activity202505Store.setHongbaoScrollInfo();
  }, 60 * 1000);

  return () => clearInterval(intervalId);
}

const numberList = computed(() => {
  if (
    !activity202505Store.hongbaoScrollInfo
    || activity202505Store.hongbaoScrollInfo.countNumber > 365
    || activity202505Store.hongbaoScrollInfo.countNumber < 0
  ) {
    return [0, 0, 0];
  }

  if (activity202505Store.hongbaoScrollInfo.countNumber < 10) {
    return [0, 0, activity202505Store.hongbaoScrollInfo.countNumber];
  }

  if (activity202505Store.hongbaoScrollInfo.countNumber < 100) {
    const tens = Math.floor(
      activity202505Store.hongbaoScrollInfo.countNumber / 10,
    );
    const units = activity202505Store.hongbaoScrollInfo.countNumber % 10;
    return [0, tens, units];
  }

  const hundreds = Math.floor(
    activity202505Store.hongbaoScrollInfo.countNumber / 100,
  );
  const remaining = activity202505Store.hongbaoScrollInfo.countNumber % 100;
  const tens = Math.floor(remaining / 10);
  const units = remaining % 10;
  // console.log("numbernumbernumber",activity202505Store.hongbaoScrollInfo.countNumber,[hundreds, tens, units])
  return [hundreds, tens, units];
});

function getSecondsUntil(targetTimeStr: string) {
  const now = new Date();

  const targetTime = new Date(targetTimeStr);

  if (isNaN(targetTime.getTime())) {
    console.error('无效的时间格式，请使用 "YYYY-MM-DD HH:MM:SS" 格式');
    return 0;
  }

  const diffInMilliseconds = targetTime.getTime() - now.getTime();
  const diffInSeconds = Math.floor(diffInMilliseconds / 1000);

  if (diffInSeconds < 0) return 0;

  return diffInSeconds;
}

onBeforeUnmount(() => {
  if (clearDownInterval.value) {
    clearDownInterval.value();
  }

  if (clearUpIntervalId.value) {
    clearUpIntervalId.value();
  }
  if (clearNoticeIntervalId.value) {
    clearNoticeIntervalId.value();
  }
});
</script>
<style scoped lang="scss">
.page {
  position: relative;

  width: 750rpx;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #faa838;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  .navigation-title {
    width: 100%;
    font-size: 34rpx;
    display: flex;
    justify-content: center;
    margin-bottom: 12rpx;
    align-items: center;
    font-weight: bold;
  }

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    .theme-image {
      width: 750rpx;
      height: 360rpx;
    }

    .activity-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 54rpx;
      width: 604rpx;
      height: 136rpx;
    }

    .activity-prize {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 188rpx;
      width: 418rpx;
      height: 40rpx;
    }

    .activity-time {
      position: absolute;
      top: 238rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 412rpx;
      height: 62rpx;
      background: url("https://ustatic.hudongmiao.com/joymewScreen/img/danmuLottery/time-bg.png");
      background-size: 100% 100%;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      line-height: 58rpx;
    }

    .rule-button {
      position: absolute;
      right: 0rpx;
      top: 62rpx;
      width: 142rpx;
      height: 44rpx;
      border-radius: 27rpx 0px 0px 27rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: #f8a15b;

      @media (min-aspect-ratio: 330/568) {
        top: 137rpx;
      }
    }

    .activity-desc-wrapper {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .activity-desc {
        width: 716rpx;
        height: 325rpx;
        background-color: #fff;
        border-radius: 22rpx 22rpx 22rpx 22rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .title {
          width: 596rpx;
          height: 36rpx;
          margin-top: 32rpx;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;

          .title-image {
            margin-top: 20rpx;
            width: 233rpx;
            height: 21rpx;
          }

          .title-text {
            width: 149rpx;
            margin-left: 15rpx;
            margin-right: 15rpx;
            font-size: 34rpx;
            font-weight: bold;
            line-height: 49rpx;
            text-align: center;
            color: #f8a15b;
          }
        }

        .content {
          width: 596rpx;
          margin-top: 28rpx;
          color: #666666;
          font-weight: 400;
          font-size: 26rpx;
          line-height: 38rpx;
          text-align: justify;
        }

        .invite-button {
          position: relative;
          width: 550rpx;
          height: 95rpx;
          background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/yellowButton.png");
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .function-button {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
          }

          .text {
            width: 371rpx;
            margin-left: 60rpx;
            font-size: 32rpx;
            color: #ffffff;
            line-height: 49rpx;
            text-align: center;
            padding-bottom: 10rpx;
            text-transform: none;
          }

          .icon {
            margin-left: 14rpx;
            width: 52rpx;
            height: 52rpx;
          }
        }
      }
    }

    .lottery-wrapper {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .lottery {
        width: 716rpx;
        height: 654rpx;
        background-color: #fff;
        border-radius: 22rpx 22rpx 22rpx 22rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .title {
          width: 670rpx;
          height: 36rpx;
          margin-top: 32rpx;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;

          .title-image {
            margin-top: 20rpx;
            width: 210rpx;
            height: 21rpx;
          }

          .title-text {
            width: 227rpx;
            // margin-left: 5rpx;
            // margin-right: 5rpx;
            font-size: 34rpx;
            font-weight: bold;
            line-height: 49rpx;
            text-align: center;
            color: #f8a15b;
          }

          .help-icon {
            margin-top: 15rpx;
            width: 30rpx;
            height: 30rpx;
          }
        }

        .content {
          width: 670rpx;
          height: 196rpx;
          margin-top: 25rpx;
          background: #fffbdd;
          border-radius: 15rpx 15rpx 15rpx 15rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          .text {
            width: 623rpx;
            height: 138rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #e07b14;
            line-height: 37rpx;
            text-align: justify;
            font-style: normal;
            text-transform: none;
          }
        }

        .notice {
          width: 670rpx;
          height: 25rpx;
          margin-top: 20rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .icon {
            width: 21rpx;
            height: 21rpx;
          }

          .message-container {
            width: 100%;
            height: 32rpx;
            position: relative;
            overflow: hidden;

            .text-wrapper {
              position: absolute;
              opacity: 0;
              transform: translateY(32px);
              animation: scrollMessage 50s infinite;
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .text1 {
                font-size: 22rpx;
                margin-left: 5rpx;
                color: #666666;
                line-height: 32rpx;
                text-align: justify;
                font-style: normal;
                text-transform: none;
              }

              .text2 {
                font-size: 22rpx;
                color: #f68225;
                line-height: 32rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }
            }

            .text-wrapper:nth-child(1) {
              animation-delay: 0s;
            }

            .text-wrapper:nth-child(2) {
              animation-delay: 5s;
            }

            .text-wrapper:nth-child(3) {
              animation-delay: 10s;
            }

            .text-wrapper:nth-child(4) {
              animation-delay: 15s;
            }

            .text-wrapper:nth-child(5) {
              animation-delay: 20s;
            }

            .text-wrapper:nth-child(6) {
              animation-delay: 25s;
            }

            .text-wrapper:nth-child(7) {
              animation-delay: 30s;
            }

            .text-wrapper:nth-child(8) {
              animation-delay: 35s;
            }

            .text-wrapper:nth-child(9) {
              animation-delay: 40s;
            }

            .text-wrapper:nth-child(10) {
              animation-delay: 45s;
            }

            /* 滚动动画 */
            @keyframes scrollMessage {
              0% {
                opacity: 0;
                transform: translateY(32px);
              }

              5% {
                opacity: 1;
                transform: translateY(0);
              }

              10% {
                opacity: 1;
                transform: translateY(0);
              }

              15% {
                opacity: 0;
                transform: translateY(-32px);
              }

              100% {
                opacity: 0;
                transform: translateY(32px);
              }
            }
          }
        }

        .hongbao {
          width: 670rpx;
          height: 244rpx;
          margin-top: 25rpx;
          background: #fffbdd;
          border-radius: 15px 15px 15px 15px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          margin-top: 20rpx;

          .time-wrapper {
            margin-top: 20rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .text {
              font-weight: bold;
              font-size: 26rpx;
              color: #f68225;
              line-height: 37rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }

            .time {
              width: 127rpx;
              height: 35rpx;
              background: #ffffff;
              font-weight: 500;
              font-size: 26rpx;
              color: #f68225;
              line-height: 37rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }
          }

          .content {
            width: 670rpx;
            margin-top: 20rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            .number-wrapper {
              width: 119rpx;
              height: 157rpx;
              margin-left: 22rpx;

              .number {
                width: 108rpx;
                height: 146rpx;
                background: #ffffff;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
                border-radius: 28rpx 28rpx 28rpx 28rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;

                .bar {
                  margin-top: 30rpx;
                  width: 70%;
                  height: 10rpx;
                  background-color: #f68225;
                }

                .text {
                  width: 34rpx;
                  height: 91rpx;
                  font-size: 63rpx;
                  color: #9b642e;
                  line-height: 91rpx;
                  letter-spacing: 2rpx;
                  text-align: justify;
                  font-style: normal;
                  text-transform: none;
                }
              }
            }

            .triangle {
              margin-left: 40rpx;
              width: 22rpx;
              height: 26rpx;
            }

            .hongbao-icon {
              margin-left: 40rpx;
              width: 134rpx;
              height: 170rpx;
            }

            .hongbao-badge {
              position: absolute;
              top: -9rpx;
              right: 28rpx;
              min-width: 40rpx;
              height: 40rpx;
              background: #ff3b30;
              color: #fff;
              font-size: 24rpx;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 10rpx;
              box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
              z-index: 2;
              transform: translate(50%, -50%);
            }
          }
        }
      }
    }

    .shagban-wrapper {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .shangban {
        width: 716rpx;
        height: 495rpx;
        background-color: #fff;
        border-radius: 22rpx 22rpx 22rpx 22rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .title {
          width: 590rpx;
          height: 36rpx;
          margin-top: 32rpx;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;

          .title-image {
            margin-top: 20rpx;
            width: 93rpx;
            height: 21rpx;
          }

          .title-text {
            width: 414rpx;
            font-size: 34rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: 37rpx;
            color: #ff990f;
            line-height: 54rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }

        .image-list {
          width: 670rpx;
          height: 387rpx;
          margin-top: 20rpx;

          .swiper-box {
            width: 670rpx;
            height: 387rpx;
          }

          .swiper-image {
            width: 670rpx;
            height: 347rpx;
          }
        }
      }
    }
  }
}

.login-remind {
  position: fixed;
  bottom: calc($tabBarHeight + env(safe-area-inset-bottom));
  left: 0;
  z-index: 98;

  width: 100vw;
  height: 38px;

  background: rgba($color: #000, $alpha: 60%);

  display: flex;
  align-items: center;
  justify-content: space-between;

  .text {
    margin-left: 20px;

    font-size: 15px;
    color: #fff;
  }

  .btn {
    margin-right: 16px;
    width: 60px;
    height: 22px;
    background: linear-gradient(270deg, rgb(228, 111, 76) 0%, #FAA838);
    font-size: 11px;
    line-height: 22px;
    color: #fff;
    text-align: center;
  }
}
</style>
